<!DOCTYPE html>
<html lang="en">
<head>
    <base href=""/>
    <meta charset="UTF-8"/>
    <title>地图找站</title>
    <link type="text/css" rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="./css/bootstrap-datetimepicker.min.css"/>
    <link type="text/css" rel="stylesheet" href="./css/bootstrap-responsive.min.css"/>
    <script type='text/javascript' src='./js/jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='./js/bootstrap.min.js'></script>

    <!--引入地图找站css-->
    <link type="text/css" rel="stylesheet" href="./css/mapPile/mapFindingPile.css"/>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

    <!--微信使用高德地图必须引入的js-->
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type='text/javascript' src='./js/map/testkey.js'></script>
    <script type='text/javascript' src='./js/map/main.js'></script>
    <!--<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>-->
    <!--<script type='text/javascript' src="https://webapi.amap.com/maps?v=1.3&key=244bc2cb511336b2a3e5129ad0309a13&&plugin=AMap.OverView,AMap.MapType,AMap.Geolocation,AMap.Scale,AMap.ToolBar,AMap.MarkerClusterer"></script>-->
    <!--引入地图找站js-->
    <script type='text/javascript' src='./js/utils/numberUtil.js'></script>
    <script type='text/javascript' src='./js/utils/ajaxUtils.js'></script>
    <script type='text/javascript' src='./js/mapPile/initStationPost.js'></script>
    <script type='text/javascript' src='./js/mapPile/mapFindingPile.js'></script>
    <!--微信js-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<style>
    html,body,#mapContainer{
        height:100%;
    }

    .input-card{
        margin: 0px;
        border: 0px;
        padding: 0px;
        height: 45%;
        width:98%;
    }
    /*top页切换*/

    </style>
</head>
<body onload="init()">
<input type="hidden" id="kaishiLocationId" onclick="kaishiLocation()"/>
<!--接收实时位置的经纬度-->
<input type="hidden" id="collectionlongitude" />
<input type="hidden"  id="collectionlatitude" />
<div class="upperPart" id="mapContainer"></div>
<div class="input-card"  >
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#closest" data-toggle="tab"  style="font-size: 27px">离我最近</a>
        </li>
        <li><a href="#frequency" data-toggle="tab"  style="font-size: 27px">使用频率最高</a></li>
        <li>
            <a href="#collection" data-toggle="tab" style="font-size: 27px">我的收藏</a>

        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <!--实例开始-->
        <div class="tab-pane fade in active" id="closest" style="height: 700px; margin-left:10px;overflow-y:scroll; overflow-x:scroll;">

        </div>
        <!--实例结束-->

        <div class="tab-pane fade" id="frequency">
            <div style="width: 100%;">
                <div style="width: 81%; float: left">
                    <div style="width:100%;">
                        <div style="width: 28%;height:50px;float: left;font-size: 28px;color: black;text-align: center">打开地图位置</div>
                        <div style="width: 72%;height:50px;float: left;">
                            <div style="text-align: left;margin-top: 5px;border: 1px solid rgba(25, 130, 226, 1);width: 45px;font-size: 20px;color: rgba(25, 130, 226, 1)">在线</div>
                        </div>
                    </div>
                    <div style="width:100%; height: 60px">
                        <div style="width: 15%;float: left">
                            <div style="margin-left:8px;text-align: left; font-size: 22px;color:rgba(153, 153, 153, 1)">微信支付</div>
                        </div>
                        <div style="width: 85%;float: left">
                            <div style="text-align: left; font-size: 22px;color:rgba(153, 153, 153, 1)">科佳运营</div></div>
                    </div>
                    <div style="width:100%;background-color: #316AC5">
                        <div style="width: 6%;float: left"><div style="margin-left: 5px;"><img src="./images/wx_map_fast.png"/></div></div>
                        <div style="width: 6%;float: left"><div ><img src="./images/wx_map_sowle.png"/></div></div>
                        <div style="width: 88%;float: left"><div><span style="font-size: 22px;color: rgba(28, 189, 111, 1)">可用 &nbsp;2&nbsp;</span>/<span style="font-size: 22px;">&nbsp;总计&nbsp;8</span></div></div>
                    </div>
                </div>
                <div  style="width: 19%; float: left">
                    <div style="width:100%;height: 40px;text-align: center"></div>
                    <div style="width:100%;height: 40px;position: relative;">
                        <div  style="height: 40px;width: 40px;background-color: rgba(25, 130, 226, 1);position: absolute;top:50%;left: 50%;margin-top: -19px;margin-left: -17px;-webkit-border-radius: 20px;">
                            <img  style="margin: 0px 0px 0px 11px;" src="./images/wx_map_point.png"/>
                        </div>
                    </div>
                    <div style="width:100%;height: 40px;text-align: center">554M</div>
                </div>
            </div>
            <div style="width: 100%;">
                <div style="width: 81%;float: left;border-top: 1px solid #F2F2F2;border-bottom: 1px solid #F2F2F2 ">
                    <div style="width:100%;height: 40px;">
                        <div style="margin-left: 5px;text-align: left"><img style="height: 16px;width: 15px;" src="./images/wx_map_adress.png"/>地址：北京市海淀区上园村3号</div>
                    </div>
                    <div style="width:100%;height: 40px;">
                        <div style="margin-left: 5px;text-align: left">电价：&nbsp;1.4元/度&nbsp;&nbsp;服务费：&nbsp;0.8元/度</div>
                    </div>
                    <div style="width:100%;height: 40px;">
                        <div style="margin-left: 5px;text-align: left">营业时间：&nbsp;00:00-24:00&nbsp;&nbsp;联系方式：&nbsp;010-61945252</div>
                    </div>
                </div>
                <div style="width: 19%;float: left;border-top: 1px solid #F2F2F2;border-bottom: 1px solid #F2F2F2 ;height: 120px;">
                    <div style="width:100%;height: 40px;position: relative;">
                        <div style="height: 40px;width: 40px;position: absolute;top:50%;left: 50%;margin-top: -19px;margin-left: -26px;">
                            <img style="margin: 0px 0px 0px 11px;" src="./images/wx_map_collction.png"/>
                        </div>
                    </div>
                    <div style="width:100%;height: 40px;text-align: center;color: rgba(153, 153, 153, 1)">收藏</div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="collection">
            <div style="width: 100%;">
                <div style="width: 81%; float: left">
                    <div style="width:100%;">
                        <div style="width: 28%;height:50px;float: left;font-size: 28px;color: black;text-align: center">交大校园充电站</div>
                        <div style="width: 72%;height:50px;float: left;">
                            <div style="text-align: left;margin-top: 5px;border: 1px solid rgba(25, 130, 226, 1);width: 45px;font-size: 20px;color: rgba(25, 130, 226, 1)">在线</div>
                        </div>
                    </div>
                    <div style="width:100%; height: 60px">
                        <div style="width: 15%;float: left">
                            <div style="margin-left:8px;text-align: left; font-size: 22px;color:rgba(153, 153, 153, 1)">微信支付</div>
                        </div>
                        <div style="width: 85%;float: left">
                            <div style="text-align: left; font-size: 22px;color:rgba(153, 153, 153, 1)">科佳运营</div></div>
                    </div>
                    <div style="width:100%;background-color: #316AC5">
                        <div style="width: 6%;float: left"><div style="margin-left: 5px;"><img src="./images/wx_map_fast.png"/></div></div>
                        <div style="width: 6%;float: left"><div ><img src="./images/wx_map_sowle.png"/></div></div>
                        <div style="width: 88%;float: left"><div><span style="font-size: 22px;color: rgba(28, 189, 111, 1)">可用 &nbsp;2&nbsp;</span>/<span style="font-size: 22px;">&nbsp;总计&nbsp;8</span></div></div>
                    </div>
                </div>
                <div style="width: 19%; float: left">
                    <div style="width:100%;height: 40px;text-align: center"></div>
                    <div style="width:100%;height: 40px;position: relative;">
                        <div style="height: 40px;width: 40px;background-color: rgba(25, 130, 226, 1);position: absolute;top:50%;left: 50%;margin-top: -19px;margin-left: -17px;-webkit-border-radius: 20px;">
                            <img style="margin: 0px 0px 0px 11px;" src="./images/wx_map_point.png"/>
                        </div>
                    </div>
                    <div style="width:100%;height: 40px;text-align: center">554M</div>
                </div>
            </div>
            <div style="width: 100%;">
                <div style="width: 81%;float: left;border-top: 1px solid #F2F2F2;border-bottom: 1px solid #F2F2F2 ">
                    <div style="width:100%;height: 40px;">
                        <div style="margin-left: 5px;text-align: left"><img style="height: 16px;width: 15px;" src="./images/wx_map_adress.png"/>地址：北京市海淀区上园村3号</div>
                    </div>
                    <div style="width:100%;height: 40px;">
                        <div style="margin-left: 5px;text-align: left">电价：&nbsp;1.4元/度&nbsp;&nbsp;服务费：&nbsp;0.8元/度</div>
                    </div>
                    <div style="width:100%;height: 40px;">
                        <div style="margin-left: 5px;text-align: left">营业时间：&nbsp;00:00-24:00&nbsp;&nbsp;联系方式：&nbsp;010-61945252</div>
                    </div>
                </div>
                <div style="width: 19%;float: left;border-top: 1px solid #F2F2F2;border-bottom: 1px solid #F2F2F2 ;height: 120px;">
                    <div style="width:100%;height: 40px;position: relative;">
                        <div style="height: 40px;width: 40px;position: absolute;top:50%;left: 50%;margin-top: -19px;margin-left: -26px;">
                            <img style="margin: 0px 0px 0px 11px;" src="./images/wx_map_collction.png"/>
                        </div>
                    </div>
                    <div style="width:100%;height: 40px;text-align: center;color: rgba(153, 153, 153, 1)">收藏</div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
</html>